<template>
  <div class="navbox">
    <div class="nleft">
      <div class="time">{{ time }}</div>
      <div class="nlsub">
        <div
          class="nlsub-item DispatchCommand active"
          @click="subhandle('DispatchCommand')"
        >
          安全调度与指挥
        </div>
        <div
          class="nlsub-item EnvirlMonitor"
          @click="subhandle('EnvirlMonitor')"
        >
          环保监测管控
        </div>
      </div>
    </div>
    <div class="logo" @click="logohandle"></div>
    <div class="nright">
      <div class="nrsub">
        <div class="nrsub-item salesData" @click="subhandle('salesData')">
          销售数据可视化
        </div>
        <div class="nrsub-item energyManage" @click="subhandle('energyManage')">
          能源管理在线监测
        </div>
      </div>
      <div class="local">
        <i></i>
        <span>桐乡</span>
      </div>
      <div class="weather">
        <span :class="`img ${getWeather(this.wendu.type)}`"></span>
        <span class="value">{{ weather }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getWeather } from "@/utils/api";
import subConf from "@/assets/js/subConf";
import store from "@/utils/store";
export default {
  name: "Main",
  data() {
    return {
      time: "",
      wendu: "",
      weather: "",
      lcative: "DispatchCommand",
    };
  },
  mounted() {
    this.getDate();
    setInterval(this.getDate, 1000);
    getWeather().then((res) => {
      if (res.data.status === 1000) {
        let _data = res.data.data.forecast[0];
        delete _data.date;
        delete _data.fengxiang;
        delete _data.fengli;
        this.wendu = _data;
        this.weather =
          _data.low.split(" ")[1] + " ~ " + _data.high.split(" ")[1];
      }
    });
    this.specialChange(this.lcative);
  },
  methods: {
    logohandle() {
      tedp.webGis.Navigate.jumpTo({
        //跳转视角 height: 41239.79312476502
        destination: new tedp.webGis.cesium.Cartesian3.fromDegrees(
          120.51849656464545,
          30.59610344027607,
          392.57542646566395
        ),
        orientation: {
          heading: tedp.webGis.cesium.Math.toRadians(0),
          pitch: tedp.webGis.cesium.Math.toRadians(-30),
          roll: 0.0,
        },
      });
    },
    getDate() {
      let date = new Date();
      let dates = date.getDate();
      dates = dates < 10 ? "0" + dates : dates;
      let hour = date.getHours();
      let min = date.getMinutes();
      min = min < 10 ? "0" + min : min;
      let sed = date.getSeconds();
      sed = sed < 10 ? "0" + sed : sed;
      this.time = hour + ":" + min + ":" + sed + "";
    },
    subhandle(item) {
      if (
        document
          .getElementsByClassName(`${item}`)[0]
          .className.indexOf("active") !== -1
      )
        return;
      document
        .getElementsByClassName(`${this.lcative}`)[0]
        .classList.remove("active");
      document.getElementsByClassName(`${item}`)[0].classList.add("active");
      this.lcative = item;
      this.specialChange(item);
    },
    specialChange(item) {
      tedp.trame.leftInit(subConf[item].left || {});
      tedp.trame.rightInit(subConf[item].right || {});

      //安全调度与指挥
      store.setKeyVideoShowAction(item === "DispatchCommand");
      item !== "DispatchCommand" ? store.setKeyVideoListAction([]) : "";

      //销售数据可视化
      store.setTransTrendShowtAction(item === "salesData");
      store.setSalesCategoryShowtAction(item === "salesData");
      let ungisdom = document.getElementsByClassName("te-un--gis")[0];
      item === "salesData"
        ? ungisdom.classList.add("ungisCls")
        : ungisdom.classList.remove("ungisCls");

      // 环保监控
      store.setTranspotshowAction(item === "EnvirlMonitor");

      //能源管理在线监测
      store.setMonthlyPonsumpShowtAction(item === "energyManage");
    },
  },
  computed: {
    getWeather() {
      return function (param) {
        if (!param) return;
        return param.indexOf("雨") !== -1
          ? "rain"
          : param.indexOf("晴") !== -1
          ? "sun"
          : "cloud";
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.navbox {
  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("~@/assets/images/nav/navbg.png");
  .nleft {
    width: 30%;
    height: 40px;
    float: left;
    .time {
      font-family: ABDUCTION;
      font-size: 18px;
      color: #fff;
      width: 150px;
      float: left;
      margin-top: 10px;
      margin-left: 80px;
      letter-spacing: 2px;
    }
    .nlsub {
      width: 300px;
      float: left;
      color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: space-around;
      .nlsub-item {
        width: 150px;
        cursor: pointer;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-family: ZZGFLQ;
        font-style: oblique;
        letter-spacing: 2px;
        margin-top: 5px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/nav/lsub.png");
      }
      .nlsub-item:nth-child(1) {
        text-indent: -20px;
      }
      .active {
        background-image: url("~@/assets/images/nav/lsub_active.png");
      }
    }
  }
  .nright {
    width: 28%;
    height: 40px;
    position: absolute;
    right: 0px;
    top: 0px;
    .nrsub {
      width: 300px;
      float: left;
      color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: space-around;
      .nrsub-item {
        width: 180px;
        cursor: pointer;
        height: 30px;
        text-indent: 25px;
        line-height: 30px;
        margin-top: 5px;
        font-family: ZZGFLQ;
        font-style: oblique;
        letter-spacing: 2px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/nav/rsub.png");
      }
      .nrsub-item:nth-child(1) {
        width: 160px;
      }
      .active {
        background-image: url("~@/assets/images/nav/rsub_active.png");
      }
    }
    .local {
      width: 50px;
      height: 40px;
      float: left;
      color: #fff;
      font-size: 14px;
      margin-top: 14px;
      margin-left: 10px;
      font-family: HYLXTJ;
      i {
        width: 20px;
        height: 25px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/nav/local.png");
        float: left;
        margin-top: -6px;
      }
    }
    .weather {
      float: left;
      height: 150px;
      width: 120px;
      color: #fff;
      margin-left: 20px;
      margin-top: 10px;
      .img {
        height: 20px;
        width: 25px;
        float: left;
        background-position: center;
        background-size: 100% 100%;
        margin-right: 5px;
      }
      .rain {
        background-image: url("~@/assets/images/nav/rain.png");
      }
      .sun {
        background-image: url("~@/assets/images/nav/sun.png");
      }
      .cloud {
        background-image: url("~@/assets/images/nav/cloud.png");
      }
    }
  }
  .logo {
    width: 100%;
    height: 90px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("~@/assets/images/nav/logo.png");
  }
}
</style>